<ion-header no-border>
  <ion-navbar>
  </ion-navbar>
</ion-header>

<ion-content no-bounce>
  <div class="phaseOne__img__container">
    <img class="phaseOne__img" src="assets/img/card-phase-release/bitpay-card-spaceman-discover.svg" />
  </div>


  <ng-container *ngIf="complete; else start">
    <div class="phaseOne__complete" @fade>

      <ng-container *ngIf="country === 'US' else thanks">
        <div class="phaseOne__content__title">
          <span translate>You're on the list!</span>
        </div>
        <img src="assets/img/card-phase-release/success.svg" />
        <p class="phaseOne__content__description" translate>
          We'll notify you as soon as the card is ready.
        </p>
      </ng-container>
      <ng-template #thanks>
        <div class="phaseOne__content__title">
          <span translate>Thanks!</span>
        </div>
        <img src="assets/img/card-phase-release/success.svg" />
        <p class="phaseOne__content__description phaseOne__content--center" translate>
          We'll let you know as soon as the BitPay Card<br> is available in your area.
        </p>
      </ng-template>

    </div>
  </ng-container>

  <ng-template #start>
    <div class="phaseOne__content">
      <div>
        <div class="phaseOne__content__title">
          <span translate>Something exciting is arriving</span>
        </div>
        <p class="phaseOne__content__description" translate>
          Join the waitlist and be the first to experience our new card.
        </p>
      </div>

      <ng-container *ngIf="joinWaitlist else main">

        <ng-container *ngIf="!countrySelected else enterEmailAndConfirm">
          <div @fade class="phaseOne__country">
            <div class="phaseOne__select__container">
              <div class="phaseOne__label">
                <label>Select Country</label>
              </div>
              <div class="phaseOne__select">
                <select [(ngModel)]="country">
                  <option *ngFor="let country of countryList" [value]="country.shortCode">{{country.name}}</option>
                </select>
              </div>
            </div>
            <button ion-button class="button-standard" [disabled]="false" (click)="countrySelected = true">
              {{'Continue' | translate}}
            </button>
          </div>
        </ng-container>

        <ng-template #enterEmailAndConfirm>
          <div @fade>
            <form [formGroup]="notifyForm">
              <ion-item class="phaseOne__form-item phaseOne__form__dark phaseOne--border-overwrite">
                <ion-label floating>{{ 'Email' | translate }}</ion-label>
                <ion-input mode="md" formControlName="email" type="email"></ion-input>
              </ion-item>

              <ion-item class="phaseOne__form-item phaseOne__form-group phaseOne__form-privacy">
                <ion-label class="phaseOne__form-group__label">
                  <span translate>BitPay would also like to send you marketing and promotional communications about our products, services and special promotions. You can change your preferences at any time in “Settings” in our app or by contacting us as set forth in our</span>
                  <span translate class="phaseOne__form__link" (click)="openPolicy()"> Privacy Notice</span>.
                </ion-label>
              </ion-item>

              <ion-item class="phaseOne__form-item phaseOne__form-group">
                <ion-label (click)="openPolicy()" class="phaseOne__form-group__label phaseOne__form-group--large-lh">
                  <span translate>Yes, please use my email address to send me exclusive email offers.</span>
                </ion-label>
                <ion-toggle formControlName="agreement" color="success"></ion-toggle>
              </ion-item>
            </form>

            <button ion-button class="button-standard" [disabled]="notifyForm.invalid" (click)="addMe()">
              {{'Add Me' | translate}}
            </button>
          </div>

        </ng-template>

        <div class="phaseOne__form" @fade>

        </div>
      </ng-container>

      <ng-template #main>
        <div class="phaseOne__ctas" *ngIf="!joinWaitlist" @fade>
          <button ion-button class="button-standard" (click)="joinList()">
            {{'Continue' | translate}}
          </button>
        </div>
      </ng-template>
    </div>
  </ng-template>

</ion-content>
